<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>
<template>
  <div class="home-main">
    <Row :gutter="20">
      <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
      <Card>
        <Row type="flex" class="user-infor">
            <!-- <Col span="8">
              <Row class-name="made-child-con-middle" type="flex" align="middle">
                <img class="avator-img" :src="avatorPath" />
              </Row>
            </Col> -->
            <Col span="16" style="padding-left:6px;">
              <Row class-name="made-child-con-middle" type="flex" align="middle">
                <div>
                  <b class="card-user-infor-name">{{user.name}},欢迎你</b>
                  <p>所属单位：{{user.company}}</p>
                </div>
              </Row>
            </Col>
          </Row>
          <div class="line-gray"></div>
          <Row class="margin-top-8">
            <Col span="8">
            <p class="notwrap">上次登录时间:</p>
            </Col>
            <Col span="16" class="padding-left-8">{{user.loginTimes|datedisposal}}</Col>
          </Row>
          <Row class="margin-top-8">
            <Col span="8">
            <p class="notwrap">上次登录IP:</p>
            </Col>
            <Col span="16" class="padding-left-8">{{user.loginIP}}</Col>
          </Row>
      </Card>
      </Col>
      <Col :md="24" :lg="16">
      <Row :gutter="20">
        <Col :xs="12" :sm="6" :md="6" :lg="12" :style="{marginBottom: '10px'}">
        <infor-card id-name="devicesNumber" :end-val="count.devicesNumber" iconType="android-menu" color="#2d8cf0" intro-text="设备总数"></infor-card>
        </Col>
        <Col :xs="12" :sm="6" :md="6" :lg="12" :style="{marginBottom: '10px'}">
        <infor-card id-name="activateNumber" :end-val="count.activateNumber" iconType="ios-pulse-strong" color="#dd4b39" :iconSize="50" intro-text="激活总数"></infor-card>
        </Col>
        <Col :xs="12" :sm="6" :md="6" :lg="12" :style="{marginBottom: '10px'}">
        <infor-card id-name="onlineNumber" :end-val="count.onlineNumber" iconType="help-buoy" color="#00a65a" :iconSize="50" intro-text="当前在线数目"></infor-card>
        </Col>
        <Col :xs="12" :sm="6" :md="6" :lg="12" :style="{marginBottom: '10px'}">
        <infor-card id-name="alarmNumber" :end-val="count.alarmNumber" iconType="information-circled" color="#f39c12" :iconSize="50" intro-text="24小时设备报警数目"></infor-card>
        </Col>
      </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
import countUp from "./components/countUp.vue";
import inforCard from "./components/inforCard.vue";
import axios from "axios";

import util from "@/libs/util";
export default {
  name: "home",
  data() {
    return {
      user: {
        name: "",
        company: "",
        avatorPath: ""
      },
      count: {
        devicesNumber: 0,
        activateNumber: 0,
        onlineNumber: 0,
        alarmNumber: 0
      },
    };
  },
  components: {
    countUp,
    inforCard
  },
  filters:{
  },
  methods: {
    getAlarm() {},
    getUserInfo() {
      axios.get(`/admin/sysuserinfo`).then(data => {
        this.user = data;
      });
    }
  },
  mounted() {
  },
  created() {
    this.getUserInfo();
  }
};
</script>